Enheter og størrelser i CSS

Når vi skal definere størrelsen til HTML elementer så bruker vi lengdeenheter. Den klassiske måten å angi størrelse på dataskjermer er å bruke piksler (px), men dette kan medføre problemer dersom nettsidene skal være universell.

Ulike typer enheter

Absolutte lengdeenheter

De absolutte lengdeenhetene er knyttet til bildepunktene (pikslene) på skjermen som viser innholdet. Hvis du bruker absolutte lengdeenheter vil elementene se store ut på skjermer med lav oppløsning (få piksler), mens elementene vil se små ut på skjermer med høy oppløsning (mange piksler). Du bør unngå å bruke absolutte lengdeenheter siden disse ikke tar hensyn til brukerens skriftinnstillinger.

Piksler

En piksel er en absolutt enhet, og hver piksel er et bildepunkt på skjermen.^[1] En stor PC skjerm er i dag gjerne 4K, eller 3840px × 2160px.

I de fleste tilfeller er det lurt å unngå å bruke piksler.

cm

Centimeter (cm) er en absolutt enhet. Hver cm er omtrent 37,8 piksler.

pt

Punkter (pt) er en absolutt enhet. Det er dette som er «vanlig» skriftstørrelse som du setter i for eksempel Microsoft Word. 12 punkter er altså vanlig skriftstørrelse. Hvert punkt er 1,33 piksler.

Relative lengdeenheter

Relative enheter tar utgangspunkt i en fast størrelse og bruker dette som referanse. For eksempel kan et element være 70 % av bredden til et annet element, eller hver bokstav kan ha høyden til 5 % av nettleservinduet.

em

En em tilsvarer bredden av bokstaven m med aktuell skrifttype og skriftstørrelse til HTML-elementet den tilhører. Siden størrelsen av en em avhenger av både skrifttype og -størrelse så er dette en relativ enhet.

Hvis du bruker em i en overskrift så vil 1em tilsvare bredden på en m i fonten i overskriften.

rem

En rem (relativ em) tilsvarer bredden av bokstaven m med skrifttypen og skriftstørrelsen til html-taggen i CSS. Rem er en relativ enhet.

Hvis du bruker rem i en overskrift så vil 1rem tilsvare bredden på en m i fonten definert i html-typeselektoren.

prosent (%)

Prosent er en relativ enhet som er relativ til størrelsen av til HTML forelderen. Et blokkelement med width: 50% vil ta opp halvparten av bredden til forelderen.

vh

Viewport height vh er en relativ enhet til størrelsen av nettleservinduets høyde. 40vh vil tilsvare 40 % av nettleserens høyde.

vw

Viewport width vw er en relativ enhet til størrelsen av nettleservinduets bredde. 40vw vil tilsvare 40 % av nettleserens bredde.

Eksempler

I dette eksempelet ser vi hvordan 2em og 2rem gir svært ulike paddinger over og under overskriftsteksten. Teksten i html settes til 62,5%. Dette er et triks som gjør at 1rem = 10px i de fleste tilfeller. Vi kan dermed bruke rem istedenfor piksler, og enkelt gjøre det mulig å regne ut størrelsen på ulike elementer.

See the Pen Demo av em og rem by stalegjelsten (@stalegjelsten) on CodePen.

Tekststørrelse

Tekststørrelse settes med font-size. Dette er avstanden fra toppen av de høyeste bokstavene (som b) til bunnen av de laveste bokstavene (som y).

Standard tekststørrelse på nettsider tilsvarer 16px, men brukeren kan selv velge en annen innstilling for standard tekststørrelse. For å tillate brukeren å velge en egen tekststørrelse så er det viktig at vi ikke definerer skriftstørrelser med #Absolutte lengdeenheter.

html {
	font-size: 62.5%; /* gjør tekststørrelsen tilsvarende 10px */
}
body {
	font-size: 162%; /* setter opp tekststørrelsen igjen til standard */}
}